<template>
	<div id="upLoadFile">
		<div v-loading="loading" element-loading-text="加载中···" element-loading-spinner="el-icon-loading">
			<el-alert v-if="MeetingDetail.errorMessage" title="驳回原因" type="error"
				:description="MeetingDetail.errorMessage" show-icon> </el-alert>
			<div class="row">
				<div class="rowTit">
					<p>
						01-{{annotation.file1}}
						<span class="error" v-if="errorMsg&&errorMsg.status">
							<i class="el-icon-success" v-if="errorMsg.status.file1=='SUCCESS'"></i>
							<i class="el-icon-warning" v-if="errorMsg.status.file1=='ERROR'"></i>
							<template v-if="errorMsg.status.file1!='SUCCESS'">
								<span>{{errorMsg.fileErrorMessages.file1}}</span>
								<template v-for="(item,i) in errorMsg.errorMessages.file1">
									<span v-if="item&&item!='null'" :key="i">{{item}}</span>
								</template>
							</template>
						</span>
					</p>
					<el-upload v-if="errorMsg.status.file1!='SUCCESS'" class="upload"
						:action="`${baseUrl}/sign/live/doctor/uploadFile`" multiple :on-success="handSuccess1"
						:show-file-list="false">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>

				<div class="fileList">
					<div class="fileRow" v-for="(item,i) in file1" :key="i">
						<b @click="handlePreview(item)">
							<i v-if="isImage(item.name)" class="el-icon-picture"></i>
							<i v-else class="el-icon-files"></i>
							{{item.name}}
						</b>
						<i v-if="item.raw" class="fileType el-icon-remove"></i>
						<i v-else class="fileType el-icon-circle-check"></i>
						<span class="doLod" @click="downLoad(item,i,'file1')">下载</span>
						<span class="del" @click="deletePic(item,i,'file1')"
							v-if="errorMsg.status.file1!='SUCCESS'">删除</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="rowTit">
					<p>
						02-{{annotation.file2}}
						<span class="error" v-if="errorMsg&&errorMsg.status">
							<i class="el-icon-success" v-if="errorMsg.status.file2 == 'SUCCESS'"></i>
							<i class="el-icon-warning" v-if="errorMsg.status.file2 == 'ERROR'"></i>
							<template v-if="errorMsg.status.file2!='SUCCESS'">
								<span>{{errorMsg.fileErrorMessages.file2}}</span>
								<template v-for="(item,i) in errorMsg.errorMessages.file2">
									<span v-if="item&&item!='null'" :key="i">{{item}}</span>
								</template>
							</template>
						</span>
					</p>
					<el-upload v-if="errorMsg.status.file2!='SUCCESS'" class="upload"
						:action="`${baseUrl}/sign/live/doctor/uploadFile`" multiple :on-success="handSuccess2"
						:show-file-list="false">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<div class="fileList">
					<div class="fileRow" v-for="(item,i) in file2" :key="i">
						<b @click="handlePreview(item)"><i v-if="isImage(item.name)" class="el-icon-picture"></i>
							<i v-else class="el-icon-files"></i>{{item.name}}</b>
						<i v-if="item.raw" class="fileType el-icon-remove"></i>
						<i v-else class="fileType el-icon-circle-check"></i>
						<span class="doLod" @click="downLoad(item,i,'file1')">下载</span>
						<span class="del" @click="deletePic(item,i,'file2')"
							v-if="errorMsg.status.file2!='SUCCESS'">删除</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="rowTit">
					<p>
						03-{{annotation.file4}}
						<span class="error" v-if="errorMsg&&errorMsg.status">
							<i class="el-icon-success" v-if="errorMsg.status.file4 == 'SUCCESS'"></i>
							<i class="el-icon-warning" v-if="errorMsg.status.file4 == 'ERROR'"></i>
							<template v-if="errorMsg.status.file4!='SUCCESS'">
								<span>{{errorMsg.fileErrorMessages.file4}}</span>
								<template v-for="(item,i) in errorMsg.errorMessages.file4">
									<span v-if="item&&item!='null'" :key="i">{{item}}</span>
								</template>
							</template>
						</span>
					</p>
					<el-upload v-if="errorMsg.status.file4!='SUCCESS'" class="upload"
						:action="`${baseUrl}/sign/live/doctor/uploadFile`" multiple :on-success="handSuccess4"
						:show-file-list="false">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<div class="fileList">
					<div class="fileRow" v-for="(item,i) in file4" :key="i">
						<b @click="handlePreview(item)"><i v-if="isImage(item.name)" class="el-icon-picture"></i>
							<i v-else class="el-icon-files"></i>{{item.name}}</b>
						<i v-if="item.raw" class="fileType el-icon-remove"></i>
						<i v-else class="fileType el-icon-circle-check"></i>
						<span class="doLod" @click="downLoad(item,i,'file1')">下载</span>
						<span class="del" @click="deletePic(item,i,'file4')"
							v-if="errorMsg.status.file4!='SUCCESS'">删除</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="rowTit">
					<p>
						04-{{annotation.file3}}
						<span class="error" v-if="errorMsg&&errorMsg.status">
							<i class="el-icon-success" v-if="errorMsg.status.file3 == 'SUCCESS'"></i>
							<i class="el-icon-warning" v-if="errorMsg.status.file3 == 'ERROR'"></i>
							<template v-if="errorMsg.status.file3!='SUCCESS'">
								<span>{{errorMsg.fileErrorMessages.file3}}</span>
								<template v-for="(item,i) in errorMsg.errorMessages.file3">
									<span v-if="item&&item!='null'" :key="i">{{item}}</span>
								</template>
							</template>
						</span>
					</p>
					<el-upload v-if="errorMsg.status.file3!='SUCCESS'" class="upload"
						:action="`${baseUrl}/sign/live/doctor/uploadFile`" :multiple="false" :limit="1"
						:on-exceed="handleExceed" :on-success="handSuccess3" :show-file-list="false">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<div class="fileList">
					<div class="fileRow" v-for="(item,i) in file3" :key="i">
						<b @click="handlePreview(item)">
							<i v-if="isImage(item.name)" class="el-icon-picture"></i>
							<i v-else class="el-icon-files"></i>
							{{item.name}}
						</b>
						<i v-if="item.raw" class="fileType el-icon-remove"></i>
						<i v-else class="fileType el-icon-circle-check"></i>
						<span class="doLod" @click="downLoad(item,i,'file1')">下载</span>
						<span class="del" @click="deletePic(item,i,'file3')"
							v-if="MeetingDetail.meetingFormat!='ONLINE'&&errorMsg.status.file3!='SUCCESS'">删除</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="rowTit">
					<p>
						05-{{annotation.file5}}
						<span class="error" v-if="errorMsg&&errorMsg.status">
							<i class="el-icon-success" v-if="errorMsg.status.file5 == 'SUCCESS'"></i>
							<i class="el-icon-warning" v-if="errorMsg.status.file5 == 'ERROR'"></i>
							<template v-if="errorMsg.status.file5!='SUCCESS'">
								<span>{{errorMsg.fileErrorMessages.file5}}</span>
								<template v-for="(item,i) in errorMsg.errorMessages.file5">
									<span v-if="item&&item!='null'" :key="i">{{item}}</span>
								</template>
							</template>
						</span>
					</p>
					<el-upload v-if="errorMsg.status.file5!='SUCCESS'" class="upload"
						:action="`${baseUrl}/sign/live/doctor/uploadFile`" multiple :on-success="handSuccess5"
						:show-file-list="false" :before-upload="beforeUpload5">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只支持上传pdf</div>
					</el-upload>
				</div>
				<div class="fileList">
					<div class="fileRow" v-for="(item,i) in file5" :key="i">
						<b @click="handlePreview(item)"><i v-if="isImage(item.name)" class="el-icon-picture"></i>
							<i v-else class="el-icon-files"></i>{{item.name}}</b>
						<i v-if="item.raw" class="fileType el-icon-remove"></i>
						<i v-else class="fileType el-icon-circle-check"></i>
						<span class="doLod" @click="downLoad(item,i,'file1')">下载</span>
						<span class="del" @click="deletePic(item,i,'file5')"
							v-if="errorMsg.status.file5!='SUCCESS'">删除</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="rowTit">
					<p>
						06-{{annotation.file6}}
						<el-link type="primary" v-if="errorMsg.status.file6!='SUCCESS'" target="_blank"
							href="//life-oasis.oss-cn-beijing.aliyuncs.com/video/劳务协议明细表.xlsx">下载劳务明细模版</el-link>
						<span class="error" v-if="errorMsg&&errorMsg.status">
							<i class="el-icon-success" v-if="errorMsg.status.file6 == 'SUCCESS'"></i>
							<i class="el-icon-warning" v-if="errorMsg.status.file6 == 'ERROR'"></i>
							<template v-if="errorMsg.status.file6!='SUCCESS'">
								<span>{{errorMsg.fileErrorMessages.file6}}</span>
								<template v-for="(item,i) in errorMsg.errorMessages.file6">
									<span v-if="item&&item!='null'" :key="i">{{item}}</span>
								</template>
							</template>
						</span>
					</p>
					<el-upload v-if="errorMsg.status.file6!='SUCCESS'" class="upload"
						:action="`${baseUrl}/sign/live/assistant/importMeetingOrder`" :data="{meetingId:meetingId}"
						:headers="{token:token}" multiple :on-success="handSuccess6" :show-file-list="false">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<div class="fileList">
					<div class="fileRow" v-for="(item,i) in file6" :key="i">
						<b @click="handlePreview(item)"><i v-if="isImage(item.name)" class="el-icon-picture"></i>
							<i v-else class="el-icon-files"></i>{{item.name}}</b>
						<i v-if="item.raw" class="fileType el-icon-remove"></i>
						<i v-else class="fileType el-icon-circle-check"></i>
						<span class="doLod" @click="downLoad(item,i,'file1')">下载</span>
						<span class="del" @click="deletePic(item,i,'file6')"
							v-if="errorMsg.status.file6!='SUCCESS'">删除</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="rowTit">
					<p>
						07-申请总金额
					</p>
				</div>
				<div class="fileList">
					<el-input-number v-model="MeetingDetail.applyMoney" controls-position="right" :min="0"
						label="请输入金额"></el-input-number>
				</div>
			</div>

			<div class="approvalRecord" v-if="approvalRecord">
				<h3>当前项目进度</h3>
				<div class="fileList">
					{{approvalRecord}}
				</div>
			</div>

			<div class="opts">
				<!-- v-if="(MeetingDetail.meetingStatus=='UPLOAD'||MeetingDetail.meetingStatus=='ERROR'||MeetingDetail.meetingStatus=='AI_REVIEW_ERROR'||MeetingDetail.meetingStatus=='OFFICIAL_ERROR')"> -->
				<el-button :loading="loading" size="small" plain type="primary" class="back"
					@click="refreshFile()">同步文件</el-button>
				<el-button :loading="loading" size="small" plain type="primary" class="back" @click="upMeetingFile()"
					v-if="'UPLOAD,ERROR,AI_REVIEW_ERROR,OFFICIAL_ERROR'.includes(MeetingDetail.meetingStatus)">提交会后文件</el-button>
			</div>
		</div>


		<!-- 文档预览 -->
		<el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" title="文档预览" custom-class="fileLog">
			<img v-if="dialogFileUrl.type == 'image'" width="100%" :src="dialogFileUrl.url">
			<div class="pdgBox" v-else-if="dialogFileUrl.type == 'pdf'">
				<pdf :src="dialogFileUrl.url" :page="currentPage" @num-pages="handleNumPages"></pdf>
				<p class="pages" v-if="numPages !== 0">总页数: {{ numPages }}</p>
				<div class="opts">
					<el-button size="mini" @click="previousPages" :disabled="currentPage === 1">上一页</el-button>
					<el-button size="mini" @click="nextPages" :disabled="currentPage === numPages">下一页</el-button>
				</div>
			</div>
			<div class="fileBox" v-else>
				<iframe :src="`https://view.officeapps.live.com/op/view.aspx?src=${dialogFileUrl.url}`"
					style="width: 100%; min-height: 100vh;"></iframe>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		getMeetingFile,
		delMeetingFile,
		getUpdateMeetInfo,
		uploadMeetingFile,
		updateMeetingFile,
		approvalProcess
	} from '@/request/api.js';
	import baseUrl from "@/request/config.js"
	import pdf from "vue-pdf";
	export default {
		name: "upLoadFile",
		data() {
			return {
				loading: false,
				baseUrl,
				MeetingDetail: {},
				dialogVisible: false,
				dialogFileUrl: {},
				file1: [],
				file2: [],
				file3: [],
				file4: [],
				file5: [],
				file6: [],
				errorMsg: {},
				annotation: {
					file1: '会议通知',
					file2: '会议日程',
					file4: '会议照片',
					file3: '签到表',
					file5: '劳务协议',
					file6: '劳务协议明细表',
				},
				currentPage: 1, // 当前页码
				numPages: 0, // 设置总页码

				approvalRecord: '', // 进度明细
				token: JSON.parse(localStorage.getItem('token')).token
			}
		},
		created() {
			// console.log(this.token)

			this.meetingId = this.$route.query.mId;
		},
		mounted() {
			this.getMeetInfo();
			this.getMeetFile();
		},
		methods: {



			//  通过文件链接下载文件
			downLoad(file, idx, key) {
				let url = file.url;
				let name = file.name;

				let a = document.createElement('a');
				let clickEvent = new MouseEvent('click');
				a.href = url;
				a.download = name;
				a.dispatchEvent(clickEvent);
				a.remove();
			},

			// 删除上传的内容
			deletePic(file, idx, key) {
				//删除前确认
				this.$confirm(`此操作将永久删除该文件, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (file.url) {
						delMeetingFile({
							filePath: file.url
						}).then(res => {
							if (res.code == 200) {
								console.log(res.data);
								this[key].splice(idx, 1);
							}
						})
					} else {
						this[key].splice(idx, 1);
					}
				})
			},

			// 上传会后文件
			upMeetingFile() {
				let data = {
					files: {
						file1: this.file1,
						file2: this.file2,
						file3: this.file3,
						file4: this.file4,
						file5: this.file5,
						file6: this.file6
					},
					applyMoney: this.MeetingDetail.applyMoney ? this.MeetingDetail.applyMoney : 0,
					names: {},
					// joinNums: this.model.peopleNum,
					meetingId: this.meetingId,
					annotation: this.annotation
				};

				for (let i in data.files) {
					data.names[i] = data.files[i].map((item) => {
						return {
							'key': item.response,
							"value": item.name
						}
					});
					data.files[i] = data.files[i].map(item => item.response ? item.response : item.url);
				};

				console.log(JSON.parse(JSON.stringify(data)))
				if (!data.files.file1[0]) {
					this.$alert('01-会议通知未上传', '提示', {
						confirmButtonText: '确定',
					});
				} else if (!data.files.file2[0]) {
					this.$alert('02-会议日程未上传', '提示', {
						confirmButtonText: '确定',
					});
				} else if (!data.files.file4[0]) {
					this.$alert('03-会议照片未上传', '提示', {
						confirmButtonText: '确定',
					});
				} else {

					this.loading = true;
					uploadMeetingFile(data).then(res => {
						this.loading = false;
						if (res.code == 200) {
							// console.log(res);
							this.$router.push({
								name: 'meetdetails',
								query: {
									mId: this.meetingId,
									now: 3
								}
							})
							this.$notify({
								title: '上传成功',
								type: 'success',
								message: '上传成功',
								position: 'bottom-right'
							});
						} else {
							this.$notify({
								title: '失败',
								type: 'error',
								message: res.msg,
								position: 'bottom-right'
							});
						}
					}).catch(err => {
						this.loading = false;
					})
				}
			},

			// 刷新文件列表
			refreshFile() {
				this.loading = true;
				updateMeetingFile({
					meetingId: this.meetingId
				}).then(res => {

					if (res.code == 200) {
						this.getMeetFile();
						this.loading = false;
					} else {
						this.loading = false;
					}
				}).catch(() => {
					this.loading = false;
				})
			},

			// 会后上传文件回显
			getMeetFile() {
				getMeetingFile({
					meetingId: this.meetingId
				}).then(res => {
					let data = res.data;
					// console.log(JSON.parse(JSON.stringify(data)));
					for (let key in data.values) {
						this[key] = data.values[key].map((item, i) => {
							return {
								url: item,
								name: data.fileNames[key][i]
							}
						});
						if (data.errorMessages[key]) {
							data.errorMessages[key] = data.errorMessages[key].split('\n');
						};
					}
					this.errorMsg = data;
				})
			},

			// 获取会议信息
			getMeetInfo() {
				let data = {
					meetingId: this.meetingId
				}
				getUpdateMeetInfo(data).then(res => {
					if (res.code == 200) {
						this.MeetingDetail = res.data
					}
				})

				approvalProcess(data).then(res => {
					if (res.code == 200) {
						this.approvalRecord = res.data
					}
				})
			},


			handSuccess1(res, file) {
				this.file1.push(file);
				this.$message({
					message: `文件 ${file.name} 上传成功。`,
					type: 'success'
				});
			},
			handSuccess2(res, file) {
				this.file2.push(file);
				this.$message({
					message: `文件 ${file.name} 上传成功。`,
					type: 'success'
				});
			},
			handSuccess3(res, file) {
				console.log(this.file3)

				this.file3[0] = file;

				this.$forceUpdate();

				this.$message({
					message: `文件 ${file.name} 上传成功。`,
					type: 'success'
				});
			},
			handSuccess4(res, file) {
				this.file4.push(file);
				this.$message({
					message: `文件 ${file.name} 上传成功。`,
					type: 'success'
				});
			},
			beforeUpload5(file) {
				// console.log(file.type);
				const isPDF = file.type === 'application/pdf';
				if (!isPDF) {
					this.$message.error('只支持上传PDF格式文档!');
				};
				return isPDF;
				// return true;
			},
			handSuccess5(res, file) {
				console.log(res)
				console.log(file)
				this.file5.push(file);
				this.$message({
					message: `文件 ${file.name} 上传成功。`,
					type: 'success'
				});
			},
			handSuccess6(res, file) {
				console.log(res)
				console.log(file)
				if (res.code == 200) {
					file.response = res.data.fileName;
					this.file6.push(file);
					this.$message({
						message: `文件 ${file.name} 上传成功。${res.data.msg}`,
						type: 'success'
					});
				} else {
					this.$message({
						message: `${res.msg}`,
						type: 'error'
					});
				}
			},

			isImage(filename) {
				let extension = '';
				    // 判断一个字符串中是否包含“?”字符
				    if (filename.includes('?')) {
				     extension = filename.split('?')[0].split('.').pop().toLowerCase();
				    } else {
				     extension = filename.split('.').pop().toLowerCase();
				    }
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
				return imageExtensions.includes(extension);
			},
			isFile(filename) {
				let extension = '';
				    // 判断一个字符串中是否包含“?”字符
				    if (filename.includes('?')) {
				     extension = filename.split('?')[0].split('.').pop().toLowerCase();
				    } else {
				     extension = filename.split('.').pop().toLowerCase();
				    }
				const imageExtensions = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];
				return imageExtensions.includes(extension);
			},
			handlePreview(file) {
				if (file.url) {
					this.dialogFileUrl = {
						url: file.url,
					};
					if (this.isImage(file.name)) {
						this.dialogFileUrl.type = 'image';
					} else if (this.isFile(file.name)) {
						this.dialogFileUrl.type = 'file';
					} else {
						this.dialogFileUrl.type = 'pdf';
					}
					this.dialogVisible = true;
				} else {
					this.$message.error(`文件 ${file.name} 未同步到服务器，请先确认提交。`);
				}
			},
			handleExceed(files, fileList) {
				this.$message.warning(`本次选择了 ${files.length} 个文件，文件数量超限`);
			},
			// 获取页码总数
			handleNumPages(numPages) {
				this.numPages = numPages;
			},
			// 点击之后页面切换为上一页
			previousPages() {
				this.currentPage--;
			},
			// 点击之后页面切换为上一页
			nextPages() {
				this.currentPage++;
			},
		},
		components: {
			pdf,
		},
	}
</script>

<style lang="scss" scoped>
	#upLoadFile {
		padding: 30px;

		.el-alert {
			margin-bottom: 20px;
		}

		.approvalRecord {
			margin-bottom: 20px;
			width: 100%;
			padding: 20px 20px;
			border-radius: 20px;
			box-shadow: 0 2px 18px rgba(203, 203, 203, 0.31);

			h3 {
				font-size: 18px;
				color: #112950;
			}
		}

		.row {
			margin-bottom: 20px;
			width: 100%;
			padding: 20px 20px;
			border-radius: 20px;
			box-shadow: 0 2px 18px rgba(203, 203, 203, 0.31);

			p {
				font-size: 18px;
				color: #112950;

				.error {
					font-size: 14px;
					color: darkred;

					span {
						margin-right: 10px;
					}

					i {
						margin: 0 10px;
					}

					.el-icon-success {
						color: green;
					}
				}

			}

			.rowTit {
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				p {
					flex: 1;
				}
			}
		}

		.opts {
			display: flex;
			align-items: center;
			justify-content: center;

			.el-button {
				width: 240px;
				height: 50px;
				font-size: 16px;
			}
		}

		.fileList {
			.fileRow {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				transition: all .3s;
				margin-bottom: 10px;

				b {
					font-size: 14px;
					font-weight: normal;
					cursor: pointer;
					display: flex;
					align-items: center;
					margin-left: 10px;

					i {
						font-size: 16px;
						margin-right: 4px;
					}

					.el-icon-picture {
						color: blueviolet;
					}

					.el-icon-files {
						color: darkorange;
					}
				}

				.del {
					display: none;
					cursor: pointer;
					margin-left: 10px;

					i {
						font-size: 16px;
					}
				}

				.doLod {
					display: none;
					cursor: pointer;
					margin-left: 10px;

					i {
						font-size: 16px;
					}
				}

				.fileType {
					display: block;
					color: green;
					margin-left: 10px;
				}

				&:last-child {
					margin-bottom: 0;
				}

				&:hover {
					background-color: #f5f5f5;

					.del {
						display: block;
						color: red;
					}

					.doLod {
						display: block;
						color: #0065FF;
					}

					.fileType {
						display: none;
					}
				}
			}
		}

	}

	::v-deep .fileLog {
		margin: 0 !important;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 90vw;
		max-width: 1200px;
		max-height: 95vh;
		overflow-y: auto;

		.el-dialog__body {
			padding-top: 0;
		}

		.pdgBox {
			.pages {
				text-align: center;
			}

			.opts {
				display: flex;
				align-items: center;
				justify-content: space-around;

			}
		}
	}
</style>